$(function() {
  var servers = [];
  var can = document.getElementById("can");
  can.height = window.innerHeight - 70;
  var generateChart = function(data, server) {
    var x = data.map(function(item) {
      return item[0];
    });
    var cpu = data.map(function(item) {
      return item[1] - 0;
    });
    var memery = data.map(function(item) {
      return item[2] - 0;
    });
    var disk = data.map(function(item) {
      return item[3] - 0;
    });
    var rec = data.map(function(item) {
      return item[4] - 0;
    });
    var send = data.map(function(item) {
      return item[5] - 0;
    });
    var chart = Highcharts.chart("data", {
      chart: {
        zoomType: "xy",
        width: $(".show_data").width(),
        height: $(".show_data").height()
      },
      title: {
        text: server.name + "数据图"
      },
      xAxis: [
        {
          categories: x
        }
      ],
      yAxis: [
        {
          labels: {
            format: "{value} %",
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          },
          title: {
            text: "占用率",
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          }
        },
        {
          labels: {
            format: "{value} KBps",
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },
          title: {
            text: "实时值",
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },
          opposite: true
        }
      ],
      tooltip: {
        shared: true
      },
      series: [
        {
          name: "CPU",
          type: "areaspline",
          data: cpu,
          tooltip: {
            pointFormat:
              '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} %</b> '
          }
        },
        {
          name: "内存",
          data: memery,
          type: "areaspline",
          tooltip: {
            pointFormat:
              '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} %</b> '
          }
        },
        {
          name: "磁盘",
          data: disk,
          type: "areaspline",
          tooltip: {
            pointFormat:
              '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} %</b> '
          }
        },
        {
          name: "接受",
          yAxis: 1,
          type: "spline",
          data: rec,
          tooltip: {
            pointFormat:
              '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y}KBps</b> '
          }
        },
        {
          name: "发送",
          yAxis: 1,
          type: "spline",
          data: send,
          tooltip: {
            pointFormat:
              '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y}KBps</b> '
          }
        }
      ]
    });
  };
  ("use strict");

  var _extends =
    Object.assign ||
    function(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };

  var _createClass = (function() {
    function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
      }
    }
    return function(Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
    };
  })();

  function _toConsumableArray(arr) {
    if (Array.isArray(arr)) {
      for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
        arr2[i] = arr[i];
      }
      return arr2;
    } else {
      return Array.from(arr);
    }
  }

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  var server = (function() {
    function server(_ref, delay, degree) {
      var x = _ref.x,
        y = _ref.y,
        id = _ref.id,
        connect_ids = _ref.connect_ids,
        name = _ref.name;

      _classCallCheck(this, server);

      this.img = document.getElementById("img");
      this.imgWidth = this.img.width;
      this.imgHeight = this.img.height;
      this.x = x;
      this.y = y;
      this._x = x;
      this._y = y;
      this.width = 0;
      this.height = 0;
      this.degree = this.imgWidth / degree;
      this.delay = delay;
      this.id = id;
      this.name = name;
      this.connect_ids = connect_ids;
      this.hovered = false;
    }

    _createClass(server, [
      {
        key: "server",
        get: function get() {
          if (this.delay >= 0) {
            this.delay -= 1;
            return { delay: this.delay };
          }
          if (this.width < this.imgWidth)
            (this.width += this.degree), (this.height += this.degree);
          var x = this.x - this.width / 2,
            y = this.y - this.height / 2;
          return {
            delay: this.delay,
            x: x,
            y: y,
            name: this.name,
            img: this.img,
            width: this.width,
            height: this.height,
            imgWidth: this.imgWidth,
            imgHeight: this.imgHeight
          };
        }
      }
    ]);

    return server;
  })();

  var line = (function() {
    function line(server1, server2, delay, degree) {
      _classCallCheck(this, line);

      var start_x = server1.x,
        //起始x
        start_y = server1.y,
        //起始y
        end_x = server2.x,
        //终点x
        end_y = server2.y,
        //终点y
        dx = end_x - start_x,
        dy = end_y - start_y;
      this.delay = delay;
      this.server1 = _extends({}, server1);
      this.server2 = _extends({}, server2);
      this.imgWidth = server1.imgWidth;
      this.imgHeight = server1.imgHeight;
      var cb = this.set_x_y(
        start_x,
        start_y,
        end_x,
        end_y,
        dx,
        dy,
        server1.imgWidth,
        server1.imgHeight
      );
      start_x = cb.start_x; //起始x
      start_y = cb.start_y; //起始y
      end_x = cb.end_x; //终点x
      end_y = cb.end_y; //终点y
      this.degree_x = (end_x - start_x) / degree;
      this.degree_y = (end_y - start_y) / degree;
      this.sx = start_x;
      this.sy = start_y;
      this.ex = start_x;
      this.ey = start_y;
      this.line = {
        start_x: start_x,
        start_y: start_y,
        end_x: end_x,
        end_y: end_y,
        id: "" + this.server1.id + "-" + this.server2.id
      };
      this.strokeStyle = "lightblue"; //"#11335a";
      this.outStrokeStyle = "#dcbd4a"; //"#11335a";
      this.inStrokeStyle = "#2e941c"; //"#11335a";
      this.lineWidth = 10;
    }

    _createClass(line, [
      {
        key: "set_x_y",
        value: function set_x_y(
          start_x,
          start_y,
          end_x,
          end_y,
          dx,
          dy,
          imgWidth,
          imgHeight
        ) {
          var k = imgHeight / imgWidth;
          var a = void 0,
            c = void 0;
          a = dy / dx;
          if (start_y !== 0 && start_x !== 0) c = start_y - a * start_x;
          //y = ax + c, 用于函数求解
          else c = end_y - a * end_x; //y = ax + c, 用于函数求解
          if (dx != 0) {
            if (a >= k || a <= -k) {
              if (dy > 0) {
                start_y = start_y + imgHeight / 2;
                end_y = end_y - imgHeight / 2;
              } else {
                start_y = start_y - imgHeight / 2;
                end_y = end_y + imgHeight / 2;
              }
              start_x = (start_y - c) / a;
              end_x = (end_y - c) / a;
            } else {
              if (dx > 0) {
                start_x = start_x + imgWidth / 2;
                end_x = end_x - imgWidth / 2;
              } else {
                start_x = start_x - imgWidth / 2;
                end_x = end_x + imgWidth / 2;
              }
              start_y = start_x * a + c;
              end_y = end_x * a + c;
            }
          } else {
            if (dy > 0) (start_y += imgWidth / 2), (end_y -= imgWidth / 2);
            else (start_y -= imgWidth / 2), (end_y += imgWidth / 2);
          }
          end_x = parseInt(end_x);
          start_x = parseInt(start_x);
          start_y = parseInt(start_y);
          end_y = parseInt(end_y);
          return {
            end_x: end_x,
            start_x: start_x,
            start_y: start_y,
            end_y: end_y
          };
        }
      },
      {
        key: "sub",
        value: function sub(arg1, arg2) {
          var r1, r2, m;
          try {
            r1 = arg1.toString().split(".")[1].length;
          } catch (e) {
            r1 = 0;
          }
          try {
            r2 = arg2.toString().split(".")[1].length;
          } catch (e) {
            r2 = 0;
          }
          arg1 = parseInt(arg1.toString().replace(/\./, ""));
          arg2 = parseInt(arg2.toString().replace(/\./, ""));
          if (r1 > r2) arg2 = arg2 * Math.pow(10, r1 - r2);
          else arg1 = arg1 * Math.pow(10, r2 - r1);
          m = Math.pow(10, Math.max(r1, r2));
          return (arg1 + arg2) / m;
        }
      },
      {
        key: "_line",
        get: function get() {
          this.delay -= 1;
          if (this.delay > 0) {
            return { delay: this.delay };
          }
          var start_x = this.server1.x;
          var start_y = this.server1.y;
          var end_x = this.server2.x;
          var end_y = this.server2.y;
          // if(this.line.id == '2-3') debugger
          if (
            parseInt(this.ex) != parseInt(this.line.end_x) ||
            parseInt(this.ey) != parseInt(this.line.end_y)
          ) {
            this.ex = this.sub(this.ex, this.degree_x);
            this.ey = this.sub(this.ey, this.degree_y);
            end_x = this.ex;
            end_y = this.ey;
          } else {
            var dx = end_x - start_x;
            var dy = end_y - start_y;
            var imgWidth = this.imgWidth;
            var imgHeight = this.imgHeight;
            var cb = this.set_x_y(
              start_x,
              start_y,
              end_x,
              end_y,
              dx,
              dy,
              imgWidth,
              imgHeight
            );
            start_x = cb.start_x; //起始x
            start_y = cb.start_y; //起始y
            end_x = cb.end_x; //终点x
            end_y = cb.end_y; //终点y
          }
          return {
            start_x: start_x,
            start_y: start_y,
            end_x: end_x,
            end_y: end_y,
            id: this.line.id,
            strokeStyle: this.strokeStyle,
            lineWidth: this.lineWidth,
            delay: this.delay
          };
        }
      }
    ]);

    return line;
  })();

  var topology = (function() {
    function topology(data, canvas, clickcb) {
      _classCallCheck(this, topology);

      this.canvas = null; //canvas
      this.ctx = null; //context
      this.data = null; //原始数据
      this.lines = []; //存储线段实例
      this.servers = []; //存储服务器实例
      this.lastDelay = 0; //判断最后一个初始动画是否结束
      this.hasFirstInitCb = false; //判断第一次渲染页面缩放适配
      this.degree = 40; //动画实例间隔距离
      this.perAneTime = 30; //动画时间间隔
      this.x = 0; //中心点x
      this.y = 0; //中心点y
      this.clickcb = clickcb; //点击事件callback
      this.move_server = null; //点击或者拖动事件的服务器

      this.init(data, canvas);
    }

    _createClass(topology, [
      {
        key: "mousedown",
        value: function mousedown(e) {
          this.x = e.layerX;
          this.y = e.layerY;
          var x = e.layerX - this.center[0],
            y = e.layerY - this.center[1];
          this.move_server = this.find_move_server(x, y);
        }
      },
      {
        key: "mousemove",
        value: function mousemove(e) {
          if (this.x == 0) {
            this.hover(e.layerX - this.center[0], e.layerY - this.center[1]);
          } else {
            var dx = e.layerX - this.x,
              dy = e.layerY - this.y;
            if (!this.move_server) {
              this.center[0] = this._center[0] + dx;
              this.center[1] = this._center[1] + dy;
            } else {
              this.move_server.x = this.move_server._x + dx;
              this.move_server.y = this.move_server._y + dy;
              var _iteratorNormalCompletion = true;
              var _didIteratorError = false;
              var _iteratorError = undefined;

              try {
                for (
                  var _iterator = this.lines[Symbol.iterator](), _step;
                  !(_iteratorNormalCompletion = (_step = _iterator.next())
                    .done);
                  _iteratorNormalCompletion = true
                ) {
                  var _line2 = _step.value;

                  var index = _line2.line.id.indexOf(this.move_server.id);
                  if (index == 0) {
                    _line2.server1.x = this.move_server.x;
                    _line2.server1.y = this.move_server.y;
                  } else if (index > 0) {
                    _line2.server2.x = this.move_server.x;
                    _line2.server2.y = this.move_server.y;
                  }
                }
              } catch (err) {
                _didIteratorError = true;
                _iteratorError = err;
              } finally {
                try {
                  if (!_iteratorNormalCompletion && _iterator.return) {
                    _iterator.return();
                  }
                } finally {
                  if (_didIteratorError) {
                    throw _iteratorError;
                  }
                }
              }
            }
          }
          this.draw();
        }
      },
      {
        key: "mouseup",
        value: function mouseup(e) {
          this.x = 0;
          this.y = 0;
          if (!!this.move_server) {
            if (!!this.clickcb) this.clickcb(this.move_server);
            this.move_server._x = this.move_server.x;
            this.move_server._y = this.move_server.y;
          }
          this._center = [].concat(_toConsumableArray(this.center));
          this.move_server = null;
        }
      },
      {
        key: "find_move_server",
        value: function find_move_server(x, y) {
          var _iteratorNormalCompletion2 = true;
          var _didIteratorError2 = false;
          var _iteratorError2 = undefined;

          try {
            for (
              var _iterator2 = this.servers[Symbol.iterator](), _step2;
              !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done);
              _iteratorNormalCompletion2 = true
            ) {
              var _server2 = _step2.value;

              if (
                _server2.x - _server2.width / 2 <= x &&
                _server2.x + _server2.width / 2 >= x &&
                _server2.y - _server2.height / 2 <= y &&
                _server2.y + _server2.height / 2 >= y
              ) {
                return _server2;
              }
            }
          } catch (err) {
            _didIteratorError2 = true;
            _iteratorError2 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion2 && _iterator2.return) {
                _iterator2.return();
              }
            } finally {
              if (_didIteratorError2) {
                throw _iteratorError2;
              }
            }
          }

          return null;
        }
      },
      {
        key: "mousewheel",
        value: function mousewheel(e) {
          var dir = 1;
          if (e.wheelDeltaY > 0) {
            dir = 5 / 4;
          } else {
            dir = 4 / 5;
          }
          this.scale(dir);
        }
      },
      {
        key: "scale",
        value: function scale(s) {
          var _iteratorNormalCompletion3 = true;
          var _didIteratorError3 = false;
          var _iteratorError3 = undefined;

          try {
            for (
              var _iterator3 = this.servers[Symbol.iterator](), _step3;
              !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done);
              _iteratorNormalCompletion3 = true
            ) {
              var _server3 = _step3.value;

              _server3.x = _server3.x * s;
              _server3.y = _server3.y * s;
              _server3._x = _server3._x * s;
              _server3._y = _server3._y * s;
              _server3.width = 50;
              _server3.height = 50;
              _server3.imgWidth = 50;
              _server3.imgHeight = 50;
            }
          } catch (err) {
            _didIteratorError3 = true;
            _iteratorError3 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion3 && _iterator3.return) {
                _iterator3.return();
              }
            } finally {
              if (_didIteratorError3) {
                throw _iteratorError3;
              }
            }
          }

          var _iteratorNormalCompletion4 = true;
          var _didIteratorError4 = false;
          var _iteratorError4 = undefined;

          try {
            for (
              var _iterator4 = this.lines[Symbol.iterator](), _step4;
              !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done);
              _iteratorNormalCompletion4 = true
            ) {
              var _line3 = _step4.value;

              _line3.imgWidth = 50;
              _line3.imgHeight = 50;
              _line3.server1.x = _line3.server1.x * s;
              _line3.server1.y = _line3.server1.y * s;
              _line3.server2.x = _line3.server2.x * s;
              _line3.server2.y = _line3.server2.y * s;
            }
          } catch (err) {
            _didIteratorError4 = true;
            _iteratorError4 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion4 && _iterator4.return) {
                _iterator4.return();
              }
            } finally {
              if (_didIteratorError4) {
                throw _iteratorError4;
              }
            }
          }

          this.draw();
        }
      },
      {
        key: "hover",
        value: function hover(x, y) {
          var _iteratorNormalCompletion5 = true;
          var _didIteratorError5 = false;
          var _iteratorError5 = undefined;

          try {
            for (
              var _iterator5 = this.servers[Symbol.iterator](), _step5;
              !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done);
              _iteratorNormalCompletion5 = true
            ) {
              var _server4 = _step5.value;

              if (
                _server4.x - _server4.width / 2 <= x &&
                _server4.x + _server4.width / 2 >= x &&
                _server4.y - _server4.height / 2 <= y &&
                _server4.y + _server4.height / 2 >= y
              ) {
                _server4.hovered = true;
              } else {
                _server4.hovered = false;
              }
            }
          } catch (err) {
            _didIteratorError5 = true;
            _iteratorError5 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion5 && _iterator5.return) {
                _iterator5.return();
              }
            } finally {
              if (_didIteratorError5) {
                throw _iteratorError5;
              }
            }
          }
        }
      },
      {
        key: "init",
        value: function init(data, canvas) {
          var t = this;
          t.canvas = canvas;
          t.ctx = canvas.getContext("2d");
          data = t.distance_separate(data);
          t.servers = data.map(function(item, index) {
            return new server(item, index, t.degree);
          });
          t.canvas.addEventListener(
            "mousedown",
            function(e) {
              t.mousedown(e);
            },
            false
          );
          t.canvas.addEventListener(
            "mousemove",
            function(e) {
              t.mousemove(e);
            },
            false
          );
          t.canvas.addEventListener(
            "mouseup",
            function(e) {
              t.mouseup(e);
            },
            false
          );
          t.canvas.addEventListener(
            "mousewheel",
            function(e) {
              t.mousewheel(e);
            },
            false
          );
          t.create_lines(t.servers);
          t.generate_canvas();
        }
      },
      {
        key: "generate_floor",
        value: function generate_floor(servers) {
          var connect_server_ids = [];
          var floor_servers = [];
          var push_floor = function push_floor(server_ids) {
            var never_push_ids = [].concat(_toConsumableArray(server_ids));
            var never_push_servers = never_push_ids.map(function(id) {
              return servers.find(function(item) {
                return item.id == id;
              });
            });
            connect_server_ids = [].concat(
              _toConsumableArray(connect_server_ids),
              _toConsumableArray(server_ids)
            );
            var length = floor_servers.length;
            floor_servers[length] = never_push_ids;
            floor_servers[length] = never_push_servers;
            var to_push_ids = never_push_servers.reduce(function(pre, cre) {
              var cre_ids = cre.connect_ids.filter(function(item) {
                return connect_server_ids.indexOf(item) == -1;
              });
              pre = Array.from(
                new Set(
                  [].concat(
                    _toConsumableArray(pre),
                    _toConsumableArray(cre_ids)
                  )
                )
              );
              return pre;
            }, []);
            if (to_push_ids.length > 0) push_floor(to_push_ids);
          };
          push_floor([servers[0].id]);
          return floor_servers;
        }
        /**
         *  parent_server 父级server
         *  children_servers 与父级关联的server
         *  r  当前子级的半径
         *  deg 子级散射中心角度
         **/
      },
      {
        key: "generate_geo",
        value: function generate_geo(parent_server, children_servers) {
          var deg = parent_server.deg == undefined ? null : parent_server.deg; //中心角度
          var max_deg = deg == null ? 360 : 100;
          var average_deg = Math.ceil(max_deg / children_servers.length);
          var start_deg = deg == null ? 0 : deg;
          var r = Math.pow(2, 2) * img.width;
          return children_servers.map(function(server, index) {
            var angle = Math.pow(-1, index + 1) * average_deg * index;
            start_deg += angle;
            server.x = parseInt(
              parent_server.x + r * Math.cos((Math.PI / 180) * start_deg)
            );
            server.y = parseInt(
              parent_server.y + r * Math.sin((Math.PI / 180) * start_deg)
            );
            server.deg = start_deg;
            return server;
          });
        }
      },
      {
        key: "distance_separate",
        value: function distance_separate(servers) {
          var _this = this;

          var return_server = [];
          var connect_server_ids = [];
          var floor_servers = this.generate_floor(servers);
          floor_servers[0][0].x = 0;
          floor_servers[0][0].y = 0;
          return_server.push(floor_servers[0][0]);
          var max_x = 0;
          floor_servers.map(function(floor_server, index) {
            var _servers = [].concat(_toConsumableArray(floor_server));
            var length = _servers.length;
            _servers.map(function(_server) {
              max_x = Math.max(max_x, Math.abs(_server.x), Math.abs(_server.y));
              if (index + 1 == floor_servers.length) return false;
              var children = floor_servers[index + 1].filter(function(item) {
                return _server.connect_ids.indexOf(item.id) != -1;
              });
              var return_children = [];
              if (children.length > 0) {
                return_children = _this.generate_geo(_server, children);
                return_server = [].concat(
                  _toConsumableArray(return_server),
                  _toConsumableArray(return_children)
                );
              }
            });
          });
          this.max_x = max_x;
          return return_server;
        }
      },
      {
        key: "generate_canvas",
        value: function generate_canvas() {
          this.width = this.canvas.width;
          this.height = this.canvas.height;
          this.center = [this.width / 2, this.height / 2];
          this._center = [this.width / 2, this.height / 2];
          this.draw();
        }
      },
      {
        key: "create_lines",
        value: function create_lines(servers) {
          var _this2 = this;

          var _loop = function _loop(server_index) {
            var _servers$server_index = servers[server_index],
              connect_ids = _servers$server_index.connect_ids,
              id = _servers$server_index.id,
              x = _servers$server_index.x,
              y = _servers$server_index.y;
            var _iteratorNormalCompletion6 = true;
            var _didIteratorError6 = false;
            var _iteratorError6 = undefined;

            try {
              var _loop2 = function _loop2() {
                var _id = _step6.value;

                var connect_server = servers.find(function(item) {
                  return item.id == _id;
                });
                var hasPushed = _this2.lines.some(function(item) {
                  return (
                    item.line.id === "" + id + "-" + _id ||
                    item.line.id === "" + _id + "-" + id
                  );
                });
                if (!hasPushed && !!connect_server) {
                  _this2.lastDelay = parseInt(server_index) + servers.length;
                  _this2.lines.push(
                    new line(
                      servers[server_index],
                      connect_server,
                      _this2.lastDelay,
                      _this2.degree
                    )
                  );
                }
              };

              for (
                var _iterator6 = connect_ids[Symbol.iterator](), _step6;
                !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next())
                  .done);
                _iteratorNormalCompletion6 = true
              ) {
                _loop2();
              }
            } catch (err) {
              _didIteratorError6 = true;
              _iteratorError6 = err;
            } finally {
              try {
                if (!_iteratorNormalCompletion6 && _iterator6.return) {
                  _iterator6.return();
                }
              } finally {
                if (_didIteratorError6) {
                  throw _iteratorError6;
                }
              }
            }
          };

          for (var server_index in servers) {
            _loop(server_index);
          }
          this.lastDelay += this.lines.length;
        }
      },
      {
        key: "draw",
        value: function draw() {
          var t = this;
          t.ctx.clearRect(0, 0, t.canvas.width, t.canvas.height);
          t.ctx.fillStyle = "rgba(22, 22, 22, .4)";
          t.ctx.fillRect(0, 0, t.canvas.width, t.canvas.height);
          t.draw_servers();
          t.draw_lines();
          if (t.lastDelay + t.degree > 0) {
            t.lastDelay -= 1;
            setTimeout(function() {
              t.draw();
            }, t.perAneTime);
          } else {
            if (!t.hasFirstInitCb) {
              t.hasFirstInitCb = true;
              t.scale(
                Math.min(t.canvas.width, t.canvas.height) / (t.max_x + 100) / 2
              );
            }
          }
        }
      },
      {
        key: "draw_servers",
        value: function draw_servers() {
          var hoverId = null;
          var _iteratorNormalCompletion7 = true;
          var _didIteratorError7 = false;
          var _iteratorError7 = undefined;

          try {
            for (
              var _iterator7 = this.servers[Symbol.iterator](), _step7;
              !(_iteratorNormalCompletion7 = (_step7 = _iterator7.next()).done);
              _iteratorNormalCompletion7 = true
            ) {
              var _server5 = _step7.value;

              if (_server5.hovered) hoverId = _server5.id;
              this.draw_server(_server5);
            }
          } catch (err) {
            _didIteratorError7 = true;
            _iteratorError7 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion7 && _iterator7.return) {
                _iterator7.return();
              }
            } finally {
              if (_didIteratorError7) {
                throw _iteratorError7;
              }
            }
          }

          this.hoverId = hoverId;
        }
      },
      {
        key: "draw_lines",
        value: function draw_lines() {
          var _iteratorNormalCompletion8 = true;
          var _didIteratorError8 = false;
          var _iteratorError8 = undefined;

          try {
            for (
              var _iterator8 = this.lines[Symbol.iterator](), _step8;
              !(_iteratorNormalCompletion8 = (_step8 = _iterator8.next()).done);
              _iteratorNormalCompletion8 = true
            ) {
              var _line4 = _step8.value;

              this.draw_line(_line4);
            }
          } catch (err) {
            _didIteratorError8 = true;
            _iteratorError8 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion8 && _iterator8.return) {
                _iterator8.return();
              }
            } finally {
              if (_didIteratorError8) {
                throw _iteratorError8;
              }
            }
          }
        }
      },
      {
        key: "draw_server",
        value: function draw_server(server) {
          var _server = _extends({}, server.server);
          if (server.delay >= 0) return false;
          var x = this.center[0] + _server.x,
            y = this.center[1] + _server.y,
            img = server.img;
          var lineWidth = 1;
          this.ctx.strokeStyle = "lightblue";
          this.ctx.fillStyle = "lightblue";
          if (server.hovered) {
            lineWidth = 2;
            this.ctx.beginPath();
            this.ctx.strokeStyle = "#77c4e2";
            this.ctx.fillStyle = "rgba(119, 196, 226, 0.6)";
            this.ctx.lineWidth = lineWidth;
            this.ctx.moveTo(x - lineWidth, y - lineWidth);
            this.ctx.lineTo(x + server.width + lineWidth, y - lineWidth);
            this.ctx.lineTo(
              x + server.width + lineWidth,
              y + lineWidth + server.height
            );
            this.ctx.lineTo(x - lineWidth, y + server.height + lineWidth);
            this.ctx.fill();
            this.ctx.closePath();
          }
          this.ctx.lineWidth = 1;
          this.ctx.strokeText(_server.name, x + _server.width / 2 - 10, y - 20);
          this.ctx.drawImage(img, x, y, _server.width, _server.height);
        }
      },
      {
        key: "draw_line",
        value: function draw_line(line) {
          var _line = _extends({}, line._line);
          if (_line.delay >= 0) return false;
          var strokeStyle = _line.strokeStyle;
          var index = line.line.id.indexOf(this.hoverId);
          strokeStyle =
            index == -1
              ? strokeStyle
              : index == 0
              ? line.outStrokeStyle
              : line.inStrokeStyle;
          this.ctx.lineWidth = 1;
          this.ctx.beginPath();
          this.ctx.strokeStyle = strokeStyle;
          this.ctx.moveTo(
            this.center[0] + _line.start_x,
            this.center[1] + _line.start_y
          );
          this.ctx.lineTo(
            this.center[0] + _line.end_x,
            this.center[1] + _line.end_y
          );
          this.ctx.stroke();
        }
      }
    ]);

    return topology;
  })();

  const data = [];
  const max = 3000;
  const min = 2;
  for (let i = 0; i < max; i++) {
    const connect_ids = [];
    let injects = Math.ceil(Math.random() * min);
    while (injects > 0) {
      connect_ids.push(Math.ceil(Math.random() * (max - 1)));
      injects--;
    }
    data.push({
      id: i,
      name: i,
      connect_ids
    });
  }
  console.log(data);
  //   $.get(
  //     "//120.55.85.1:8069/proxy_id{B0884528-25CE-4384-8D72-2B81C9707F2E}/intu/server_list",
  //     function(data) {
  // servers = data.map(function(item){
  //     item.ab = item.name == '江苏' ? 'js' :
  //         item.name == "上海" ? 'sh' :
  //         item.name == "浙江" ?'zj' :
  //         'central'
  //     return item
  // });

  var Topology = new topology(data, can, clickcb);
  //     }
  //   );

  $(".close").on("click", function() {
    $(".data_box").removeClass("active");
  });

  function clickcb(server) {
    var proxy_id = server.id;
    var $data = $(".data_box");
    $.get(`//120.55.85.1:8069/proxy_id${proxy_id}/intu/usage`, function(data) {
      if (!data.errcode) {
        generateChart(data, server);
        $data.addClass("active");
      } else {
        alert(data.errmsg);
      }
    });
  }
});
